<template>
    <div class="ground1"></div>

    <div class="baseGround">
        <div style="width: 110%;position: relative;left: -20px;top: -21px;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                style="width: 100%;height: 15%;">
                <el-menu-item index="1" @click="loginBtn">登录</el-menu-item>
                <el-menu-item index="2" @click="registerBtn">注册</el-menu-item>
            </el-menu>
        </div>
        <div>
            <div v-if="choose">
                <div class="input">
                    <el-input v-model="email" size="large" clearable>
                        <template #prepend>邮箱</template>
                    </el-input>
                </div>
                <div class="input">
                    <el-input v-model="password" type="password" size="large">
                        <template #prepend>
                            密码
                        </template>
                    </el-input>
                </div>
                <div style="margin: 5px 0;">
                    <el-checkbox v-model="remember" label="记住我" size="large" />
                </div>
                <el-button type="primary" style="width: 30%;margin-left: 35%;margin-top: 20px;"
                    @click="userLogin">登录</el-button>
                <el-alert :title="wrongMessage" :type="isWrong == false ? 'success' : 'error'" v-if="isWrong" />
            </div>
            <div v-if="!choose">
                <div class="input">
                    <el-input v-model="email" size="large" clearable>
                        <template #prepend>邮箱</template>
                    </el-input>
                </div>
                <div class="input">
                    <el-input v-model="username" size="large" clearable>
                        <template #prepend>管理员名</template>
                    </el-input>
                </div>
                <div class="input">
                    <el-input v-model="password" size="large" clearable>
                        <template #prepend>密码</template>
                    </el-input>
                </div>
                <div class="input">
                    <el-input v-model="confirmPassword" size="large" clearable>
                        <template #prepend>确认密码</template>
                    </el-input>
                </div>
                <div class="input">
                    <el-input v-model="code" size="large" clearable>
                        <template #prepend>验证码</template>
                    </el-input>
                </div>
                <div style="text-align: center;">
                    <el-button type="primary" :disabled="reSend == '发送验证码' ? false : true"
                        style="width: 40%;margin-top: 20px;" @click="sendMail">
                        {{ reSend }} {{ count }}</el-button>
                    <el-button type="primary" style="width: 40%;margin-top: 20px;" @click="userRegister">注册</el-button>
                </div>
                <el-alert :title="wrongMessage" :type="isWrong == false ? 'success' : 'error'" v-if="isWrong"
                    style="margin-top: 10px;" />
            </div>
        </div>
    </div>
</template>

<script>
import router from '@/router/index';
import $ from 'jquery';
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
    name: "adminLogin",

    setup() {
        const store = useStore();
        let activeIndex = ref('1');
        let choose = ref(true);
        let username = ref('');
        let email = ref('');
        let password = ref('');
        let confirmPassword = ref('');
        let wrongMessage = ref('');
        let isWrong = ref(false);
        let code = ref();
        let count = ref();
        let reSend = ref("发送验证码");

        let remember = ref(0);

        let loginBtn = () => {
            choose.value = true;
            email.value = '';
            username.value = '';
            password.value = '';
            confirmPassword.value = '';
            wrongMessage.value = '';
            isWrong.value = false;
            code.value = '';
        }
        let registerBtn = () => {
            choose.value = false;
            email.value = '';
            username.value = '';
            password.value = '';
            confirmPassword.value = '';
            wrongMessage.value = '';
            isWrong.value = false;
            code.value = '';
        }
        let sendMail = () => {
            if (email.value == '' || username.value == '' || password.value == '' || confirmPassword.value == '') {
                wrongMessage.value = "请填完注册信息";
                isWrong.value = true;
                return;
            }
            if (password.value != confirmPassword.value) {
                wrongMessage.value = "两次密码不一致";
                isWrong.value = true;
                return;
            }
            reSend.value = "重新发送验证码";
            count.value = 60;
            const timer = setInterval(
                function () {
                    if (count.value > 0)
                        count.value--;
                    else {
                        clearInterval(timer);
                        count.value = '';
                        reSend.value = "发送验证码";
                    }
                }
                , 1000);
            $.ajax({
                url: "http://124.221.73.180:3001/admin/sendEmail/",
                type: "post",
                data: {
                    username: username.value,
                    password: password.value,
                    confirmPassword: confirmPassword.value,
                    email: email.value,
                }, success(resp) {
                    if (resp == "success")
                        wrongMessage.value = "发送成功";
                    else {
                        isWrong.value = true;
                        wrongMessage.value = resp;
                    }
                }, error() {
                    isWrong.value = true;
                    wrongMessage.value = "发送失败，请检查邮箱地址";
                }
            })
        }
        let userLogin = () => {
            localStorage.clear();
            $.ajax({
                url: "http://124.221.73.180:3001/admin/login/",
                type: "post",
                data: {
                    email: email.value,
                    password: password.value,
                }, success(resp) {
                    let t = ref({
                        message: resp.message,
                        token: resp.token,
                        remember: remember.value,
                    });
                    if (resp.message == 'success') {
                        {
                            store.dispatch("login", t.value);
                            router.push({ name: "homeSetting" });
                        }
                    } else {
                        isWrong.value = true;
                        wrongMessage.value = resp.message;
                    }
                }, error() {
                    isWrong.value = true;
                    wrongMessage.value = "请填完表单";
                }
            })
        }
        let userRegister = () => {
            localStorage.clear();
            $.ajax({
                url: "http://124.221.73.180:3001/admin/register/",
                type: "post",
                data: {
                    name: username.value,
                    password: password.value,
                    confirmPassword: confirmPassword.value,
                    email: email.value,
                    code: code.value,
                }, success(resp) {
                    if (resp != "success") {
                        wrongMessage.value = resp;
                    } else {
                        isWrong.value = true;
                        wrongMessage.value = "账号审核中";
                    }
                }, error() {
                    isWrong.value = true;
                    wrongMessage.value = "请填完表单";
                }
            })
        }
        return {
            activeIndex,

            userLogin,
            userRegister,
            loginBtn,
            registerBtn,
            sendMail,

            isWrong,
            code,
            reSend,
            count,
            email,
            choose,
            username,
            password,
            confirmPassword,
            wrongMessage,

            remember,
        }
    }
}

</script>

<style scoped>
.baseGround {
    z-index: 100;
    width: 400px;
    height: 80%;
    position: absolute;
    top: 10%;
    right: 10%;
    background-color: rgba(248, 249, 250, 0.7);
    padding: 20px;
}

.input {
    margin-top: 15px;
}

.ground1 {
    background: url('http://photo.jlyproject.cn/cf3dac48-3b40-45bb-9576-07d982c86a89.jpg')no-repeat;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -2;
}
</style>